<template>
  <div>
    <el-card class="card1">
      <el-form :model="form" :inline="true" size="small">
        <!-- <el-form-item label="申述方DT号" label-width="100px">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="设备注册代码" label-width="100px">
          <el-input v-model="form.eleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:30px">
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <p style="font-weight:800;margin-left:12px">以下是其他公司提交的电梯申诉记录，请确认核实。如果确定是由被申诉公司维保，请选择电梯点击“不同意”按钮；如果不是，请选择电梯“同意”。</p>
    </el-card>
    <el-card class="card3">
      <div slot="header" class="clearfix">
        电梯申请转出记录
        <el-button style="float: right" type="danger" @click="selectOk" size="small">同意</el-button>
        <el-button style="float: right;margin-right:10px" @click="selectNoOk" size="small">不同意</el-button>
      </div>
      <div class="text">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" :selectable="selectable">
          </el-table-column>
          <el-table-column label="设备注册代码" width="190">
            <template slot-scope="scope">
              <div @click="infoClick(scope.row.eleCode)" style="color:#0090EC;cursor: pointer;">{{scope.row.eleCode}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="result" label="当前状态">
            <template slot-scope="scope">
              {{resultArr[scope.row.result]}}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="userName" label="申诉方DT号">
          </el-table-column> -->
          <el-table-column prop="orgName" label="维保单位">
          </el-table-column>
          <el-table-column prop="phonenumber" label="申诉方联系电话">
          </el-table-column>
          <el-table-column prop="eleUseCommunity" label="设备详情地址">
          </el-table-column>
          <el-table-column prop="eleUseInnerno" label="内部编号">
          </el-table-column>
          <el-table-column prop="appealTime" label="申请时间" width="170">
          </el-table-column>
<!--          <el-table-column prop="handleTime" label="处理时间" width="170">-->
<!--          </el-table-column>-->
          <el-table-column label="申诉文件" width="120">
            <template slot-scope="scope">
              <el-button type='text' @click="download(scope.row.url)" style="color:#0090EC;cursor: pointer;">
                {{scope.row.fileName}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
                       :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </div>
    </el-card>
    <LeftDetails ref="LeftDetails" />
  </div>
</template>

<script>
import util from '@/libs/util'
import { getselectEleAppealedPage, getdeleteEleAppealed, getnotDeleteEleAppealed } from '@/api/elevator'
import LeftDetails from '@/views/elevator/components/leftdetails.vue'
export default {
  components: {
    LeftDetails
  },
  data () {
    return {
      resultArr: {
        0: '不同意',
        1: '同意',
        2: '系统处理',
        3: '等待处理',
        null: '等待处理'
      },
      options: [],
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      form: {

      },
      maintOrgId:'0',
      formLabelWidth: '100px',
      multipleSelection: []
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    setOrgId(orgId){
      this.maintOrgId=orgId;
    },
    // 点击下载
    download (url) {
      window.open(util.fileIP + url)
    },
    selectable (row, index) {
      if (row.result == '3' || row.result == null) {
        return true
      }
    },
    // 同意
    selectOk () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认同意选中的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.id
          })
          const params = {
            ids: query
          }
          getdeleteEleAppealed(params).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.$message({
                type: 'success',
                message: '同意成功!'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消同意'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }

    },
    //不同意
    selectNoOk () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认不同意选中的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.id
          })
          const params = {
            ids: query
          }
          getnotDeleteEleAppealed(params).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.$message({
                type: 'success',
                message: '不同意成功!'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消不同意'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    },
    // 获取被申诉电梯数据
    gettableData () {
      const query = {
        maintOrgId: this.maintOrgId,
        eleCode: this.form.eleCode,
        userName: this.form.userName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getselectEleAppealedPage(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    infoClick (eleCode) {
      this.$refs.LeftDetails.dialogVisible1 = true
      this.$refs.LeftDetails.zIndex="0"
      this.$refs.LeftDetails.eleCode = eleCode
      this.$refs.LeftDetails.getPageData()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
    },
  }
}

</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;
  text-align: right;
}
.card1 {
  ::v-deep .el-input__inner {
    width: 180px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
.clearfix {
  font-weight: 800;
}

.card3 {
  margin-top: 15px;
  .text {
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    ::v-deep .el-table__fixed::before {
      height: 0px;
    }
  }
}
</style>
